<template>
	 <div class="loginpage" style={style}>
			 	 	<div class="logoicon">
			 	 		<img src="./images/loginicon.png" alt=""/>
			 	 	</div>
			 	 	<div class="form">
			 	 		<div class="phone input">
 			 	 			<input type="text" v-model="text" placeholder="请输入手机号码"/>
			 	 		</div>
			 	 		<div class="code input">
 			 	 			<input type="text"  v-model="code" placeholder="请输入验证码"/>
 			 	 			<div class="sendcode"  @click="sendCode()">
 			 	 				{{sendcode | reverse}}
 			 	 			</div>
 			 	 		</div>
			 	 	</div>
			 	 	<div class="btn" @click='login()'>登录</div>
			 	 </div>
</template><!-- //header这个被渲染的组件，内部包含一个自己的内嵌的router-view，那个这个通过路由的操控是通过vuerouter中的children来配置的 -->
<script>
import $ from 'webpack-zepto';
export default {
	data(){
		return {
              shareTip:false,
              isapp:false,
              text:"",
              code:"",
              sendcode:"发送验证码",
              clicked:0,//未点击过
		}
	},
    filters: {//自动移过滤器
        reverse: function(value){
          if(typeof value == "number"){
          	 return value + "s";
          }else{
          	return value;
          }
        }
    },
	created(){//这个钩子函数是在实例被创建之后data数据被渲染，但是template还没渲染之前,页面内容还未出现
		
	},
    props:['currentCity'],
	components: {
          //组建声明
    },
	methods:{
		sendCode:function(){
			let phone = this.text;
			if(!phone.match('/^1\d{10}$/')){

			}
			var total = 5;
			if( this.clicked == 0){
				this.clicked = 1;//不可点击
				let timeall = total ;
				this.sendcode = timeall;
			var timer = setInterval(()=>{
					this.sendcode  = --timeall ; 
					if( timeall < 1){
						this.sendcode = "重新发送";
						clearInterval(timer);
						timeall = total;
						this.clicked = 0;//可点击
					}
				},1000)
			}
			
		},
		login:function(){
			// fetch("https://api.goxueche.com/App/Info/index/debug/1/action/user/method/login/phone/18135054989/source/web/code/1234.shtml").then(function(response){
			// 	return response.json();
			// }).then(function(data){
			// 	console.log(data);
			// })
			localStorage.setItem("userinfo" ,{"token":'12123123'});
			this.$router.go(-1);
		}
	},
	moutend(){
			
	}
};
</script>
<style lang="scss" scoped>
@import 'src/common/styles/mixins';
  .router-link-active {
	  color: red;
	   text-decoration: none;
  }
  .loginpage{
	position:fixed;
	left:0;
	top:0;
	background:#fff;
	width:100%;
	height:100%;
	z-index:10;
}
.logoicon{

	padding-top:px2rem(160);
	img{
		display: block;
		margin:auto;
		width: px2rem(218);
	}
}
input{
	font-size:px2rem(32);
}
.form{
	 padding:px2rem(125) px2rem(35);
	 .icon{
	 	width: px2rem(24);
	 	height: px2rem(32);
	 	img{
	 		width: 100%;
	 		display: block;
	 	}

	 }
	.input{
	 
		overflow: hidden;
		@extend %flex-center;
		padding:0 px2rem(38) ;
		height: px2rem(90);
		@extend %flexbox;
		border:2px solid #f8f8f8;
		&:nth-of-type(1){ border-bottom:none;}
		
		input{
			display: block;
			height: 90%;
			padding-left:px2rem(15); 
			@include flex(1);
			border:none;
		}
		.sendcode {
			background:#fa6311;
			width:px2rem(184);
			height: px2rem(64);
			@extend %box-center;
			color:#fff;
			font-size: px2rem(24);
			margin-left:px2rem(10);
			border-radius:2px;
			 
		}
	}
}
.btn{
	width:px2rem(680);
	height:px2rem(88);
	background:#fa5800;
	color:#fff;
	font-size:px2rem(32);
	@extend %box-center;
	margin:auto;
	border-radius:3px;
}

.form{
	.input{
		input{
			font-size: px2rem(35);
		}
	}
}
</style>